<template>
  <base-echarts :width="width" :height="height" :options="options" />
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from 'vue'
import baseEcharts from './base-echarts.vue'
import { getBarEchartsOption } from '../data/option.config'
import type { TchargingStatisticsData } from '../types/option'

const props = withDefaults(
  defineProps<{
    width?: string
    height?: string
    echartDatas: TchargingStatisticsData
  }>(),
  {
    width: '100%',
    height: '100%',
    echartDatas: () => [
      {
        name: '一月',
        value: 0,
      },
    ],
  },
)

const options = ref<any>()

watch(
  () => props.echartDatas,
  (newV) => {
    options.value = getBarEchartsOption(newV)
  },
)

onMounted(() => {
  // 第一次走这里
  options.value = getBarEchartsOption(props.echartDatas)
})
</script>

<style scoped></style>
